<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-white mb-2 animate-glow">{{ t('reminders') }}</h1>
      <p class="text-electric-500">{{ t('policyReminderManagement') }}</p>
    </div>

    <!-- 标签页 -->
    <div class="flex space-x-1 glass-card p-1 rounded-xl">
      <button
        @click="activeTab = 'list'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'list'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ t('reminderList') }}
      </button>
      <button
        @click="activeTab = 'create'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'create'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ t('createReminder') }}
      </button>
    </div>

    <!-- 提醒列表标签页 -->
    <div v-if="activeTab === 'list'" class="space-y-6">
      <!-- 统计信息 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="glass-card p-4 text-center">
          <div class="text-2xl font-bold text-white">{{ reminders.length }}</div>
          <div class="text-electric-500 text-sm">总提醒数</div>
        </div>
        <div class="glass-card p-4 text-center">
          <div class="text-2xl font-bold text-green-400">{{ activeReminders }}</div>
          <div class="text-electric-500 text-sm">活跃提醒</div>
        </div>
        <div class="glass-card p-4 text-center">
          <div class="text-2xl font-bold text-yellow-400">{{ todayReminders }}</div>
          <div class="text-electric-500 text-sm">今日提醒</div>
        </div>
        <div class="glass-card p-4 text-center">
          <div class="text-2xl font-bold text-red-400">{{ inactiveReminders }}</div>
          <div class="text-electric-500 text-sm">已暂停</div>
        </div>
      </div>

      <!-- 提醒列表 -->
      <div class="glass-card p-6">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-xl font-semibold text-white flex items-center">
            <Bell class="w-5 h-5 mr-2 text-yellow-400" />
            我的提醒
          </h3>
          <button
            @click="activeTab = 'create'"
            class="cyber-button flex items-center space-x-2"
          >
            <Plus class="w-4 h-4" />
            <span>新建提醒</span>
          </button>
        </div>

        <div class="space-y-4">
          <div
            v-for="reminder in reminders"
            :key="reminder.id"
            class="bg-white/5 rounded-lg p-4 hover:bg-white/10 transition-colors"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <div class="flex items-center space-x-3 mb-2">
                  <h4 class="text-lg font-semibold text-white">{{ reminder.title }}</h4>
                  <span :class="getTypeClass(reminder.type)">
                    {{ getTypeText(reminder.type) }}
                  </span>
                  <span :class="reminder.active ? 'status-active' : 'status-error'">
                    {{ reminder.active ? '活跃' : '暂停' }}
                  </span>
                </div>
                
                <p class="text-white/70 text-sm mb-3">{{ reminder.description }}</p>
                
                <div class="flex items-center space-x-6 text-xs text-electric-500">
                  <div class="flex items-center space-x-1">
                    <Calendar class="w-3 h-3" />
                    <span>频率: {{ getFrequencyText(reminder.frequency) }}</span>
                  </div>
                  <div class="flex items-center space-x-1">
                    <Clock class="w-3 h-3" />
                    <span>时间: {{ reminder.time }}</span>
                  </div>
                  <div class="flex items-center space-x-1">
                    <AlertCircle class="w-3 h-3" />
                    <span>下次提醒: {{ reminder.nextTrigger }}</span>
                  </div>
                </div>
              </div>

              <div class="flex space-x-2">
                <button class="p-2 hover:bg-white/10 text-tech-blue-300 hover:text-white rounded-lg transition-colors">
                  <Edit class="w-4 h-4" />
                </button>
                <button class="p-2 hover:bg-white/10 text-red-300 hover:text-red-200 rounded-lg transition-colors">
                  <Trash2 class="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建提醒标签页 -->
    <div v-else class="max-w-2xl mx-auto">
      <div class="glass-card p-6">
        <h3 class="text-xl font-semibold text-white mb-6 flex items-center">
          <Plus class="w-5 h-5 mr-2 text-tech-blue-400" />
          创建新提醒
        </h3>
        
        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div>
            <label class="block text-white text-sm font-medium mb-2">提醒标题</label>
            <input
              v-model="formData.title"
              type="text"
              class="cyber-input"
              placeholder="输入提醒标题..."
              required
            />
          </div>

          <div>
            <label class="block text-white text-sm font-medium mb-2">详细描述</label>
            <textarea
              v-model="formData.description"
              rows="3"
              class="cyber-input resize-none"
              placeholder="输入提醒详情..."
            ></textarea>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">提醒类型</label>
              <select v-model="formData.type" class="cyber-input">
                <option value="policy">政策提醒</option>
                <option value="deadline">截止日期</option>
                <option value="meeting">会议提醒</option>
                <option value="custom">自定义</option>
              </select>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">重复频率</label>
              <select v-model="formData.frequency" class="cyber-input">
                <option value="once">单次</option>
                <option value="daily">每日</option>
                <option value="weekly">每周</option>
                <option value="monthly">每月</option>
              </select>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">提醒日期</label>
              <input
                v-model="formData.date"
                type="date"
                class="cyber-input"
                required
              />
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-2">提醒时间</label>
              <input
                v-model="formData.time"
                type="time"
                class="cyber-input"
                required
              />
            </div>
          </div>

          <div class="flex items-center space-x-3">
            <input
              v-model="formData.active"
              type="checkbox"
              id="active"
              class="w-4 h-4 text-electric-500"
            />
            <label for="active" class="text-white text-sm">
              立即启用此提醒
            </label>
          </div>

          <div class="flex space-x-4">
            <button
              type="submit"
              class="flex-1 cyber-button"
            >
              创建提醒
            </button>
            <button
              type="button"
              @click="activeTab = 'list'"
              class="px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors font-medium"
            >
              取消
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  Calendar, 
  Clock, 
  Bell, 
  Plus, 
  Edit, 
  Trash2, 
  AlertCircle 
} from 'lucide-vue-next'

export default {
  name: 'Reminders',
  components: {
    Calendar,
    Clock,
    Bell,
    Plus,
    Edit,
    Trash2,
    AlertCircle
  },
  inject: ['globalState'],
  computed: {
    currentLanguage() {
      return this.globalState.currentLanguage
    },
    translations() {
      return {
        zh: {
          reminders: '定时提醒',
          policyReminderManagement: '政策相关事项智能提醒管理',
          reminderList: '提醒列表',
          createReminder: '创建提醒'
        },
        en: {
          reminders: 'Reminders',
          policyReminderManagement: 'Intelligent Policy-Related Event Reminder Management',
          reminderList: 'Reminder List',
          createReminder: 'Create Reminder'
        }
      }
    }
  },
  data() {
    return {
      activeTab: 'list',
      formData: {
        title: '',
        description: '',
        type: 'policy',
        frequency: 'once',
        date: '',
        time: '',
        active: true
      },
      reminders: [
        {
          id: 1,
          title: '税务申报截止提醒',
          description: '每月增值税和企业所得税申报截止日提醒',
          type: 'deadline',
          frequency: 'monthly',
          date: '2024-01-15',
          time: '09:00',
          active: true,
          nextTrigger: '2024-02-15 09:00'
        },
        {
          id: 2,
          title: '政策更新通知',
          description: '关注财税政策最新变化和更新',
          type: 'policy',
          frequency: 'weekly',
          date: '2024-01-08',
          time: '10:00',
          active: true,
          nextTrigger: '2024-01-22 10:00'
        },
        {
          id: 3,
          title: '政策解读会议',
          description: '参加数字化转型政策解读会议',
          type: 'meeting',
          frequency: 'once',
          date: '2024-01-20',
          time: '14:00',
          active: true,
          nextTrigger: '2024-01-20 14:00'
        },
        {
          id: 4,
          title: '环保政策检查',
          description: '企业环保合规性自查提醒',
          type: 'custom',
          frequency: 'monthly',
          date: '2024-01-01',
          time: '08:00',
          active: false,
          nextTrigger: '2024-02-01 08:00'
        }
      ]
    }
  },

  methods: {
    t(key, params = {}) {
      let text = this.translations[this.currentLanguage.value || this.currentLanguage][key] || key
      Object.keys(params).forEach(param => {
        text = text.replace(`{${param}}`, params[param])
      })
      return text
    },
    
    handleSubmit() {
      console.log('创建提醒:', this.formData)
      // 这里实现创建提醒的逻辑
      this.activeTab = 'list'
    },
    getTypeClass(type) {
      const baseClass = 'px-2 py-1 rounded-full text-xs font-medium'
      switch (type) {
        case 'policy': 
          return `${baseClass} bg-tech-blue-500/20 text-tech-blue-300`
        case 'deadline': 
          return `${baseClass} bg-red-500/20 text-red-300`
        case 'meeting': 
          return `${baseClass} bg-green-500/20 text-green-300`
        case 'custom': 
          return `${baseClass} bg-electric-500/20 text-electric-300`
        default: 
          return `${baseClass} bg-gray-500/20 text-gray-300`
      }
    },
    getTypeText(type) {
      switch (type) {
        case 'policy': return '政策提醒'
        case 'deadline': return '截止日期'
        case 'meeting': return '会议提醒'
        case 'custom': return '自定义'
        default: return '未知'
      }
    },
    getFrequencyText(frequency) {
      switch (frequency) {
        case 'once': return '单次'
        case 'daily': return '每日'
        case 'weekly': return '每周'
        case 'monthly': return '每月'
        default: return '未知'
      }
    }
  }
}
</script> 